Smiley Buttons

Code a micro:bit emoji!

Program the buttons on the micro:bit to show a happy 😀 or sad face 🙁

Step 1

Use the ||input:on button pressed|| function to run code when button A is pressed. Type the code below, or drag a code snippet from the ||input:Input|| Toolbox category.

input.onButtonPressed(Button.A, function() {})

Step 2

Use the basic ||basic:show icon|| statement inside the ||input:on button pressed|| function display a Happy face when button A is pressed.

input.onButtonPressed(Button.A, function() { 
    basic.showIcon(IconNames.Happy)
})

Step 3

Run your code in the micro:bit simulator on the screen, press the A button. Do you see a happy face? ⭐ Great job! ⭐

Step 4

Write another ||input:on button pressed|| function with a ||basic:show icon|| inside to display a Sad face when button B is pressed. Try copying and pasting your existing code, and change A to B and Happy to Sad.

input.onButtonPressed(Button.B, function() { 
    basic.showIcon(IconNames.Sad)
})

Step 5

Run your code in the micro:bit simulator on the screen, press the B button. Do you see a sad face? ⭐ Great job! ⭐

Step 6

If you have a micro:bit device, connect it to your computer and click the |Download| button. Follow the instructions to transfer your code onto the micro:bit. Try pressing the A and B buttons on the micro:bit to see your Happy 😀 and Sad 🙁 emojis!

Step 7

Go further - try adding a secret emoji that appears when A and B buttons are pressed together! Learn more about how the micro:bit buttons work by watching this video.